<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<h3>
	<s:text name="page.heading.settings" />
</h3>
<s:form id="controllerSaveFormId" cssClass="form-horizontal"
	action="save" namespace="/controller" method="post" theme="simple">
	<s:hidden name="mode" />
	<s:hidden name="controller.id" />
	<div class="form-group">
		<s:actionerror cssClass="alert alert-error" />
	</div>
	<div class="form-group">
		<s:actionmessage cssClass="alert alert-success" />
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="controller.name" /></label>
		<div class="controls">
			<s:textfield name="controller.name" cssClass="input-xlarge"
				placeholder="%{getText('controller.name')}" required="true" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text
				name="controller.user.name" /></label>
		<div class="controls">
			<s:textfield name="controller.userName" cssClass="input-xlarge"
				value="sysop" required="true" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="inputPassword"><s:text
				name="controller.password" /></label>
		<div class="controls">
			<s:password name="controller.userPassword" cssClass="input-xlarge"
				value="sysop" required="true" showPassword="true" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="controller.operatemethod" /></label>
		<div class="controls">
			<s:select list="cameraType" name="operateMode" listKey="key" listValue="value" value="controller.operateMethod" ></s:select>
		<!-- 	value="controller.operateMethod" -->
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="controller.host" /></label>
		<div class="controls">
			<s:textfield id="controllerUrl" name="controller.url"
				cssClass="input-xlarge" placeholder="%{getText('controller.host')}" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="controller.protocol" /></label>
		<div class="controls">
			<s:select list="#{'http':'http', 'https':'https'}" name="controller.protocol"></s:select>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text
				name="controller.port.http" /></label>
		<div class="controls">
			<s:textfield id="controllerHttpPort" name="controller.httpPort"
				cssClass="input-small"
				placeholder="%{getText('controller.port.http')}" />
			<span id="httpPortStatus"></span>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text
				name="controller.port.rtsp" /></label>
		<div class="controls">
			<s:textfield id="controllerRtspPort" name="controller.rtspPort"
				cssClass="input-small"
				placeholder="%{getText('controller.port.rtsp')}" />
			<span id="rtspPortStatus"></span>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text
				name="controller.port.control" /></label>
		<div class="controls">
			<s:textfield id="controllerControlPort" name="controller.controlPort"
				cssClass="input-small"
				placeholder="%{getText('controller.port.control')}" />
			<s:url var="testConnectionUrl" action="validateConnection"
				namespace="/controller"></s:url>
			<span id="controlPortStatus"></span>
			<button type="button" id="validateCon">Check Connection</button>
		</div>
	</div>
	<div class="form-actions">
		<%-- <sj:submit targets="targetDiv" value="submit"></sj:submit>
		  --%>
		<button type="submit" class="btn btn-primary">
			<s:text name="form.btn.submit" />
		</button>
		<button type="reset" class="btn">
			<s:text name="form.btn.reset" />
		</button>
	</div>
</s:form>
<script type="text/javascript">
	$(document).ready(function() {
		//alert("loaded");
		$('#validateCon').click(function() {
			//alert("clicked");
			var controllerUrl = $('#controllerUrl').val();
			var controllerHttpPort = $('#controllerHttpPort').val();
			var controllerRtspPort = $('#controllerRtspPort').val();
			var controllerControlPort = $('#controllerControlPort').val();
			
			if(controllerHttpPort=="") {
				controllerHttpPort="80";
			}
			
			$.ajax({
				url : "<s:property value='testConnectionUrl'/>",
				type : 'POST',
				data : 'url=' + controllerUrl + '&port=' + controllerHttpPort,
				success : function(response) {
					$('#validateCon').hide();
					if(response=="ok") {
						$('#httpPortStatus').html('<img src="<s:url value='/img/ok.png'/>" />');
					}
					else {
						$('#httpPortStatus').html('<img src="<s:url value='/img/failed.png'/>" />');
					}
				}
			});
			$.ajax({
				url : "<s:property value='testConnectionUrl'/>",
				type : 'POST',
				data : 'url=' + controllerUrl + '&port=' + controllerRtspPort,
				success : function(response) {
					$('#validateCon').hide();
					if(response=="ok") {
						$('#rtspPortStatus').html('<img src="<s:url value='/img/ok.png'/>" />');
					}
					else {
						$('#rtspPortStatus').html('<img src="<s:url value='/img/failed.png'/>" />');
					}
				}
			});
			$.ajax({
				url : "<s:property value='testConnectionUrl'/>",
				type : 'POST',
				data : 'url=' + controllerUrl + '&port=' + controllerControlPort,
				success : function(response) {
					$('#validateCon').hide();
					if(response=="ok") {
						$('#controlPortStatus').html('<img src="<s:url value='/img/ok.png'/>" />');
					}
					else {
						$('#controlPortStatus').html('<img src="<s:url value='/img/failed.png'/>" />');
					}
				}
			});
		});

		$('#controllerUrl').keyup(function() {
			$('#httpPortStatus').html('');
			$('#rtspPortStatus').html('');
			$('#controlPortStatus').html('');
			$('#validateCon').show('Check Connection');
		});

		$('#controllerHttpPort').keyup(function() {
			$('#httpPortStatus').html('');
			$('#validateCon').show('Check Connection');
		});

		$('#controllerRtspPort').keyup(function() {
			$('#rtspPortStatus').html('');
			$('#validateCon').show('Check Connection');
		});

		$('#controllerControlPort').keyup(function() {
			$('#controlPortStatus').html('');
			$('#validateCon').show('Check Connection');
		});
		
		
	});

	
</script>